<template>
	<view class="message-detail">
		<view class="detail-header">
			<text class="detail-title">{{ messageDetail.title }}</text>
			<text class="detail-time">{{ formatTime(messageDetail.time) }}</text>
		</view>
		<view class="detail-content">
			{{ messageDetail.content }}
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const messageDetail = ref({
		title: '',
		content: '',
		time: ''
	});

	// 格式化时间
	const formatTime = (timeStr) => {
		const date = new Date(timeStr)
		return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
	}

	onLoad((options) => {
		// 根据id获取消息详情
		const id = options.id;

		uni.request({
			url: `http://localhost:3000/messages/${id}`,
			method: 'GET',
			success: (res) => {
				messageDetail.value = res.data;
			},
			fail: () => {
				messageDetail.value = {
					title: '消息不存在',
					content: '该消息不存在或已被删除',
					time: new Date().toISOString()
				}
			}
		});
	})
</script>
<style>
	.message-detail {
		padding: 30rpx;
		background-color: #fff;
		min-height: 100vh;
	}

	.detail-header {
		margin-bottom: 40rpx;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 20rpx;
	}

	.detail-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 16rpx;
	}

	.detail-time {
		font-size: 26rpx;
		color: #999;
	}

	.detail-content {
		font-size: 30rpx;
		line-height: 1.8;
		color: #333;
	}
</style>